<template>
	<view class="myAccount" :class="theme+'-bg-hbox'">
		<view class="navBox" :class="theme+'-bg-cbox'">
			<view class="nav1 line" @click="open()" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<!-- <image style="transition:2s" src="../../static/images/icons/zhutiguanli.png"></image> -->
					</view>
					<view class="text">
						<text class="title">{{$t('MyAccount.Account')}}</text>
						<!-- #ifdef H5-->
						<text class="user">{{userInformation.phone}}</text>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS-->
						<text class="user">{{userInformation.phone}}</text>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<text class="user">{{userInformation.nickname}}</text>
						<!-- #endif -->
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup">
			<view class="popupBox br-1" :class="theme+'-bg-cbox'">
				<view class="item" :class="theme + '-ftext-color'">
					<text class="title">{{$t('MyAccount.Options')}}</text>
				</view>
				<view class="item line" :class="theme + '-ftext-color'" @click="logOut()" v-for="(item,index) in list"
					:key="index">
					<text>{{locale=='en'?item.english:item.text}}</text>
				</view>
				<!-- <view class="item line" :class="theme + '-ftext-color'">
					<text>yyy</text>
				</view>
				<view class="item line" :class="theme + '-ftext-color'">
					<text>yyy</text>
				</view>
				<view class="item line" :class="theme + '-ftext-color'">
					<text>yyy</text>
				</view>
				<view class="item line" :class="theme + '-ftext-color'">
					<text>yyy</text>
				</view> -->
			</view>
		</uni-popup>

		<view class="navBox" :class="theme+'-bg-cbox'">
			<view class="nav2" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
					</view>
					<view class="text">
						<text class="title">{{$t('MyAccount.Memberinformation')}}</text>
						<text class="user">{{$t('MyAccount.Youarenotyetamember')}}</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<button class="line" :class="theme+'-bg-abox'">购买会员</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="navBox" :class="theme+'-bg-cbox'">
			<view class="nav" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">

					</view>
					<view class="text">
						<text style="font-size: 32rpx; font-weight: 600;">登录方式</text>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/weixin.png"></image>
					</view>
					<view class="text">
						<text>去绑定</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/QQ.png"></image>
					</view>
					<view class="text">
						<text>去绑定</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/shouji.png"></image>
					</view>
					<view class="text">
						<text>去绑定</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/ziyuanxhdpi.png"></image>
					</view>
					<view class="text">
						<text>去绑定</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/youjian.png"></image>
					</view>
					<view class="text">
						<text>去绑定</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image src="../../../static/images/icons/jinrujiantou.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view> -->


	</view>
</template>

<script>
	// 我的账户页面
	export default {
		data() {
			return {
				userInformation: uni.getStorageSync('userInformation'),
				list: [{
					text: '退出',
					english: 'Quit',
				}]
			};
		},
		onLoad() {
			this.$theme()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			logOut() {
				uni.removeStorageSync('userInformation')
				this.close()
				uni.showLoading({
					title: '退出登录中...'
				})

				setTimeout(() => {
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
				}, 400)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.myAccount {
		height: 100%;

		.line {
			cursor: pointer;
		}

		.navBox {
			margin-bottom: 15rpx;

			.nav1 {
				height: 180rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 0 48rpx;


				.text {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-weight: 600;
					}

					.user {
						margin-top: 20rpx;
					}
				}
			}

			.nav2 {
				height: 320rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 48rpx;
				position: relative;

				.text {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-weight: 600;
					}

					.user {
						margin-top: 20rpx;
						color: #E54D42;
					}

					text {
						cursor: pointer;
					}
				}

			}

			.nav {
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 0 48rpx;
			}

			.nav-l {
				display: flex;
				width: 400rpx;
				align-items: center;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}

			.text {
				text {
					font-size: 26rpx;
					cursor: pointer;
				}
			}

			.nav-r {
				.swin {
					button {
						width: 185rpx;
						height: 70rpx;
						position: absolute;
						right: 50rpx;
						bottom: 50rpx;
						color: #FFFFFF;
						font-size: 26rpx;
						line-height: 70rpx;
					}

				}
			}
		}

		.popupBox {
			width: 650rpx;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.title {
					font-size: 34rpx;
					font-weight: 600;
					margin-left: 40rpx;
				}

				text {
					margin-left: 40rpx;
					font-size: 24rpx;
					cursor: pointer;
				}
			}
		}
	}
</style>
